<!-- 模板 -->
<template>
    <div class="app__body">
        <div class="app__header">
            <label>本期获奖名单</label>
        </div>
        <div class="main" :class="{'aui-nodata': list && list.length <= 0}">
            <div class="main__top" v-if="list && list.length > 0">
                <div class="main__top__item top2">
                    <div class="img" v-if="list[1]">
                        <img :src="list[1].headimg">
                    </div>
                    <h3 v-if="list[1]">{{ list[1].nickname }}</h3>
                    <label v-if="list[1]">{{ list[1].time }}秒</label>
                </div>
                <div class="main__top__item top1"> 
                    <div class="img" v-if="list[0]">
                        <img :src="list[0].headimg">
                    </div>
                    <h3 v-if="list[0]">{{ list[0].nickname }}</h3>
                    <label v-if="list[0]">{{ list[0].time }}秒</label>
                </div>
                <div class="main__top__item top3">
                    <div class="img" v-if="list[2]">
                        <img :src="list[2].headimg">
                    </div>
                    <h3 v-if="list[2]">{{ list[2].nickname}}</h3>
                    <label v-if="list[2]">{{ list[2].time }}秒</label>
                </div>
            </div>
            <ul v-if="list && list.length > 3">
                <template v-for="(item, index) in list">
                    <li v-if="index >= 3">
                        <em>{{index}}</em>
                        <div class="img">
                            <img :src="list[index].headimg">
                        </div>
                        <label class="aui-ellipsis--1">{{list[index].nickname}}</label>
                        <span>{{ list[index].time }}秒</span>
                    </li>
                </template>
            </ul>
        </div>
    </div>
</template>


<!-- js -->
<script>
    import { DB } from '../config/db.js';
    export default{
        data(){
            return{
                list: ''
            }
        },
        methods: {
            getWinnerList(id){
                return this.$http.get(DB.ip + 'activity/'+ id +'/prize').then((res) => {
                    this.$aui.loading.hide();
                    if(res.data.resCode == '000000'){
                        this.list = res.data.datas;

                        for(let i = 0; i < this.list.length; i ++){
                            if(this.list[i].headimg.indexOf('//wx.qlogo.cn') < 0){
                                this.list[i].headimg = DB.aliyundomain + this.list[i].headimg;
                            }
                        }
                    }else{
                        this.$aui.toast.show(res.data.resMsg);
                    }
                }, (error) => {
                    this.$aui.loading.hide();
                    this.$aui.toast.show('系统错误，错误代码：' + error.status)
                });
            }
        },
        mounted(){
            this.$aui.loading.show({
                type: 1
            });

            let activityId = this.$route.query.id || '';

            this.getWinnerList(activityId); 
        }
    }
</script>

<!-- scss -->
<style scoped lang="scss">
    @import "../styles/common/config.scss";
    @import "../styles/components/1px/index.scss";
    .app__body{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9;
        @include flexbox;
        @include flexboxVertical;
        background: url("../assets/images/winner_bg.png") 50% 0.3rem no-repeat #114384;
        background-size: 6.3rem 3.3rem;
        color: #fff;

    }
    .app__header{
        width: 100%;
        font-size: 0.5rem;
        text-align: center;
        line-height: 1.2rem;
        height: 1.2rem;
        font-weight: bold;
        margin-top: 1.5rem;
        margin-bottom: 1.2rem;
        @include flexbox;
        @include flexCenterHori;
        @include flexCenterVeri;
        label{
            padding: 0 0.2rem;
        }
        &:before{
            width: 1.5rem;
            height: 0.04rem;
            content: "";
            background: url("../assets/images/line_rule_shadow.png") 0 0 no-repeat;
            background-size: 1.5rem 0.04rem;
        }
        &:after{
            width: 1.5rem;
            height: 0.04rem;
            content: "";
            background: url("../assets/images/line_rule_shadow.png") 100% 0 no-repeat;
            background-size: 1.5rem 0.04rem;
            transform: rotate(180deg);
            margin-top: 2px;
        }
    }
    .main{
        @include flexAuto;
        position: relative;
        @include flexbox;
        @include flexboxVertical;
        padding: 0 0.4rem;
        @at-root &__top{
            width: 100%;
            @include flexbox;
            margin-bottom: 0.2rem;
            background: #fff;
            height: 2.9rem;
            &__item{
                @include flexAuto;
                padding-left: 0.2rem;
                padding-right: 0.2rem; 
                position: relative;
                .img{
                    position: relative;
                    z-index: 9;
                    img{
                        border-radius: 50%;
                    }
                }
                h3{
                    position: relative;
                    z-index: 9;
                    font-size: 0.26rem;
                    color: #8c8b8b;
                    text-align: center;
                    line-height: 0.4rem;
                    margin-top: 0.1rem;
                    margin-bottom: 0.05rem;
                }
                label{
                    position: relative;
                    z-index: 9;
                    width: 100%;
                    display: block;
                    text-align: center;
                    font-size: 0.34rem;
                    color: #000;
                    line-height: 0.4rem;
                }
                &.top1{
                    .img{
                        margin-top: -0.3rem;
                        img{
                            width: 1.22rem;
                            display: block;
                            margin: 0 auto;
                        }
                        &:after{
                            width: 0.4rem;
                            height: 0.4rem;
                            display: block;
                            position: absolute;
                            content: "";
                            background: url("../assets/images/tag_one.png") 50% no-repeat;
                            background-size: cover;
                            bottom: -0.1rem;
                            right: 0.2rem;
                        }
                    }
                    &:after{
                        width: 100%;
                        height: 3.2rem;
                        position: absolute;
                        top: -1rem;
                        content: "";
                        background: url("../assets/images/top1_bg.png") 50% no-repeat;
                        background-size: 100% 100%;
                        left: 0;
                        z-index: 2;
                    }
                    label{
                        color: #f9454b;
                    }
                }
                &.top2{
                    h3{
                         margin-top: 0.22rem;
                    }
                    .img{
                        margin-top: -0.2rem;
                        img{
                            width: 1rem;
                            display: block;
                            margin: 0 auto;
                        }
                        &:after{
                            width: 0.4rem;
                            height: 0.4rem;
                            display: block;
                            position: absolute;
                            content: "";
                            background: url("../assets/images/tag_two.png") 50% no-repeat;
                            background-size: cover;
                            bottom: -0.1rem;
                            right: 0.4rem;
                        }
                    }
                    &:after{
                        width: 150%;
                        height: 3.2rem;
                        position: absolute;
                        top: -0.5rem;
                        content: "";
                        background: #fff;
                        left: 0;
                        z-index: 1;
                        border-radius: 8px 0 0 0;
                    }
                }
                &.top3{
                    h3{
                         margin-top: 0.22rem;
                    }
                    .img{
                        margin-top: -0.1rem;
                        img{
                            width: 0.9rem;
                            display: block;
                            margin: 0 auto;
                        }
                        &:after{
                            width: 0.4rem;
                            height: 0.4rem;
                            display: block;
                            position: absolute;
                            content: "";
                            background: url("../assets/images/tag_three.png") 50% no-repeat;
                            background-size: cover;
                            bottom: -0.1rem;
                            right: 0.4rem;
                        }
                    }
                    &:after{
                        width: 150%;
                        height: 3rem;
                        position: absolute;
                        top: -0.2rem;
                        content: "";
                        background: #fff;
                        right: 0;
                        z-index: 1;
                        border-radius: 0 8px 0 0;
                    }
                }
            }
        }

        ul{
            background: #fff;
            padding: 0 0.3rem;
            position: relative;
            z-index: 8;
            @include flexAuto;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            margin-top: -1rem;
            min-height: 1.0rem;
            >li{
                @include flexbox;
                @include flexCenterVeri;
                @extend .aui-line--top;
                em{
                    display: block;
                    width: 1.0rem;
                    line-height: 1.2rem;
                    text-align: center;
                    color: #8c8b8b;
                    font-size: 0.68rem;
                }
                .img{
                    margin-left: 0.1rem;
                    margin-right: 0.2rem;
                    width: 0.8rem;
                    >img{
                        display: block;
                        width: 100%;
                        border-radius: 50%;
                    }
                }
                label{
                    display: block;
                    line-height: 1.2rem;
                    font-size: 0.26rem;
                    color: #8c8b8b;
                    @include flexAuto;
                    margin-right: 0.2rem;
                }
                span{
                    font-size: 0.26rem;
                    display: block;
                    color: #8c8b8b;
                    width: 1.5rem;
                    text-align: center;
                }
            }
        }
    }
</style>
